<!-- 频道管理 -->
<script setup>
import {
  articleGetCategoryService,
  articleDeleteService
} from '@/api/article.js'
import { ref } from 'vue'
import {
  Edit,
  Delete
} from '@element-plus/icons-vue'
import PopUps from '@/views/article/components/PopUps.vue'
import { ElMessageBox } from 'element-plus'
const articleList = ref()
const loading = ref(true)
const getArticleCategory = async () => {
  const { data } =
    await articleGetCategoryService()
  articleList.value = data.data
  loading.value = false
}

getArticleCategory()

const dialog = ref()
const addCategory = () => {
  dialog.value.open({})
}

const headEdit = (row) => {
  dialog.value.open(row)
}

const flushed = () => {
  getArticleCategory()
}

const headDelete = async (row) => {
  await ElMessageBox.confirm(
    '确认要删除吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
  await articleDeleteService(row.id)
  ElMessage.success('删除成功')
  getArticleCategory()
}
</script>

<template>
  <pageComponent title="文章分类">
    <template #button>
      <el-button
        plain
        type="primary"
        round
        @click="addCategory"
        >添加分类</el-button
      >
    </template>
    <el-table
      :data="articleList"
      v-loading="loading"
    >
      <el-table-column
        type="index"
        label="序号"
      ></el-table-column>
      <el-table-column
        prop="cate_name"
        label="分类名称"
      ></el-table-column>
      <el-table-column
        prop="cate_alias"
        label="分类别名"
      ></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            plain
            @click="headEdit(scope.row)"
          />
          <el-button
            type="danger"
            :icon="Delete"
            circle
            plain
            @click="headDelete(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <PopUps
      ref="dialog"
      @updata="flushed"
    ></PopUps>
  </pageComponent>
</template>

<style scoped></style>
